import {computed, designPage, onMounted, reactive, useClasses} from "plain-design-composition";
import React from "react";
import './ManagerHome.less'
import {ManagerMenu} from "@/application/manager/home/components/ManagerMenu";
import {unit} from "plain-utils/string/unit";
import {ManagerApplication} from "@/application/manager/home/ManagerApplication";
import {ManagerHead} from "@/application/manager/home/components/ManagerHead";
import {ManagerContent} from "@/application/manager/home/components/ManagerContent";
import {PlRoot} from "plain-design";
import '../assets/iconfont/iconfont.css'
import {nav} from "@/micro/nav/nav";
import {NavigatorRouteType} from "plain-micro-application";

export const ManagerHome = designPage(() => {

    const state = reactive({
        isMounted: (() => {
            onMounted(() => setTimeout(() => state.isMounted = true, 100))
            return false
        })(),
    })

    const fullPage = [
        NavigatorRouteType.public,
        NavigatorRouteType.private,
        NavigatorRouteType.page,
    ].indexOf(nav.initialState.config.routeType) > -1

    const styles = computed(() => {
        const menu = {width: unit(ManagerApplication.state.menuSize)}
        const head = {height: unit(ManagerApplication.state.headSize), left: unit(ManagerApplication.state.menuSize)}
        const content = {
            left: !fullPage ? unit(ManagerApplication.state.menuSize) : 0,
            top: !fullPage ? unit(ManagerApplication.state.headSize) : 0,
        }
        return {menu, head, content}
    })

    const classes = useClasses(() => [
        'pro-manager-home',
        {
            'pro-manager-home-mounted': state.isMounted,
            'pro-manager-home-collapse-menu': ManagerApplication.state.collapseMenu,
        }
    ])

    return () => (
        <PlRoot>
            <div className={classes.value}>
                <ManagerContent style={styles.value.content}/>
                {!fullPage && <>
                    <ManagerMenu
                        style={styles.value.menu}
                        headSize={ManagerApplication.state.headSize}
                        title={ManagerApplication.state.collapseMenu ? 'Pro' : 'Plain Design Pro'}
                    />
                    <ManagerHead style={styles.value.head} onToggleCollapse={() => ManagerApplication.state.collapseMenu = !ManagerApplication.state.collapseMenu}/>
                </>}
            </div>
        </PlRoot>
    )
})